<div class="container">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
    <nz-form-item>
      <nz-form-label [nzSpan]="7">照片</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input type="text" style="display: none;" formControlName="headerPhoto" [(ngModel)]="personnelInfo.headerPhoto">
        <nz-upload class="avatar-uploader" [nzAction]="uploadService.uploadAction" [nzHeaders]="uploadService.headers"
          nzName="file" nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
          (nzChange)="handleChange($event)">
          <ng-container *ngIf="!personnelInfo.headerPhoto">
            <i class="upload-icon iconfont" [ngClass]="loading  ? 'icon-loading' : 'icon-add-line'"></i>
            <div class="ant-upload-text">上传</div>
          </ng-container>
          <img *ngIf="personnelInfo.headerPhoto" [src]="personnelInfo.headerPhoto" style="width: 100%" />
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" [(ngModel)]="personnelInfo.name" placeholder="请输入姓名" />
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')"> 请输入姓名! </ng-container>
          <ng-container *ngIf="control.hasError('pattern')">姓名不能全为空格</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>性别</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入性别!">
        <nz-select class="fl mr20" formControlName="gender" nzShowSearch nzAllowClear [(ngModel)]="personnelInfo.gender"
          nzPlaceHolder="性别">
          <nz-option nzLabel="男" nzValue="男"></nz-option>
          <nz-option nzLabel="女" nzValue="女"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>出生日期</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip=" 请输入出生日期!">
        <nz-date-picker nzFormat="yyyy-MM-dd" placeholder="请输入出生日期" [(ngModel)]="personnelInfo.birth"
          formControlName="birth" (ngModelChange)="onChange($event)">
        </nz-date-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>身份证</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip=" 请输入身份证!">
        <input nz-input formControlName="idCard" [(ngModel)]="personnelInfo.idCard" placeholder="请输入身份证" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>职务</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip=" 请输入职务!">
        <input nz-input formControlName="position" [(ngModel)]="personnelInfo.position" placeholder="请输入职务" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>所属部门</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <nz-select class="fl mr20" nzShowSearch nzAllowClear formControlName="parentId"
          [(ngModel)]="personnelInfo.orgTree.parentId" nzPlaceHolder="所属部门">
          <nz-option *ngFor="let option of departmentList" [nzLabel]="option.nodeName" [nzValue]="option.id">
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>账号</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入账号">
        <input formControlName="employeeNo" [(ngModel)]="personnelInfo.employeeNo" nz-input placeholder="请输入账号" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>电话</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入电话">
        <input formControlName="phone" autocomplete="off" [(ngModel)]="personnelInfo.phone" nz-input
          placeholder="请输入电话" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入密码">
        <input type="password" formControlName="password" autocomplete="new-password"
          [(ngModel)]="personnelInfo.acc.password" nz-input placeholder="请输入密码" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzOffset]="7" [nzSpan]="12">
        <button nz-button (click)="goBack()" nzSize="large">取消</button>
        <button nz-button nzType="primary" class="ml20" nzSize="large" type="submit" (click)="confirm()">确定</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>